<template>
	<div class="family-hall1-more-list-wrap">
		<div class="header" ref="header">首页<span class="nav" @click="active = !active"></span></div>
		<div class="navlist" :class="{'navliston':active}">
			<p v-if="!user.logined"><router-link to="/login">登录</router-link></p>
			<p><router-link :to="{name:'familyHall',params:{eng_name:eng_name}}">首页</router-link></p>
			<p :class="{'on':type === 'all'}"><router-link :to="{name:'FamilyHall1MoreList',params:{eng_name:eng_name,type:'all'}}">全部课程</router-link></p>
			<p :class="{'on':type === 'password'}"><router-link :to="{name:'FamilyHall1MoreList',params:{eng_name:eng_name,type:'password'}}">精品课程</router-link></p>
		</div>
		<div class="morelist">
			<div class="w1200 content" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="40">
				<div id="vgloading"></div>
				<ul id="morelist">
					<li :class="{'on':item.room_live_state == 1,'password':item.password == 1}"  v-for="(item,index) in roomList" :key="index">
						<router-link :to="{name:'room',params:{eng_name:item.eng_name,roomid:String(item.room_id)}}">
							<span class="status">{{item.room_live_state == 1?'直播中':'休息中'}}</span>
							<div class="pic"><img :src="item.icon" alt="icon"></div>
							<h4>
								<span class="num">房间人数：{{item.room_user}}</span>
								<span class="name">{{item.room_name}}</span>
							</h4>
							<div class="des">
								房间简介: {{item.content}}
							</div>
						</router-link>
					</li>
				</ul>
				<div class="loading" v-show="tips">全部加载完咯</div>
				<div class="loading" v-show="loading"><img src="@/assets/images/loading.gif" alt="" class="loading-img"/><span>玩命加载中...</span></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import mixin from '@/mixins/removeLoading'
	import {getRoomList} from '@/api/hall'
	export default{
		name:'FamilyHall1MoreList',
		mixins: [mixin],
		data(){
			return{
				eng_name:this.$route.params.eng_name,
				active:false,
				type:undefined,
				listQuery:{
					page:1,
					pageSize:10,
					eng_name:this.$route.params.eng_name
				},
				roomList:[],
				tips:false,
				loading:false,
				busy:true
			}
		},
		computed:{
			...mapGetters([
			  'user'
			])
		},
		methods:{
			getRoomList(){
				getRoomList(this.listQuery).then(response=>{
					this.listQuery.page++
					this.roomList.push(...response.data.data)
					if(response.data.data.length === 10){
						this.busy = false
					}else{
						this.busy = true
						this.loading = false
						this.tips = true
					}
				})
			},
			loadMore(){
				let vm = this;
				this.busy = true;
				this.loading = true;
				this.tips = false;
				setTimeout(() => {
					vm.getRoomList();
				}, 1000);
			}
		},
		watch: {
			$route:{
				handler: function(route) {
					this.type = route.params && route.params.type
					this.listQuery.page = 1
					this.roomList = []
					this.active = false
					if(this.type === 'password'){
						this.listQuery.team_boutique = 1
					}else{
						this.listQuery.team_boutique = 0
					}
					this.getRoomList()
				},
				immediate: true
			}
		}
	}
</script>

<style scoped>
	@import url("../../../../styles/familyHallCommon.css");
	.morelist { padding: 10px 15px;font-size:12px; }
	.morelist li { position: relative; margin-bottom: 10px; border:1px solid #dcdcdc; }
	.morelist li .pic { position:relative; height: 125px; background: url(../../../../assets/images/listbg.jpg) no-repeat; background-size: cover; }
	.morelist li .pic img { max-width: 100%; max-height: 100%; position: absolute; left: 55px; bottom: 0; }
	.morelist li .status { position: absolute; width: 60px; height: 20px; right: 10px; top: 95px; line-height: 20px; text-align: center; background: #999; color: #fff; border-radius: 10px; z-index: 2; }
	.morelist li h4 { position: absolute; left: 0; top: 0; right: 0; height: 24px; line-height: 24px; padding: 0 10px; background: rgba(0,0,0,.5); z-index: 2; color: #fff; }
	.morelist li h4 .num { float: right; }
	.morelist li h4 .name { float: left; width: 230px; height: 24px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
	.morelist li .des { max-height: 60px; overflow: hidden; padding: 5px 10px; line-height: 20px; background: #fff; color: #666;}
	.morelist li.last { border:0 none; margin-bottom: 0; padding: 10px 0; text-align: center; }
	.morelist .loading{padding: 0.62rem 0;font-size: 0.87rem;color: #000;text-align: center;}
	.morelist	.loading-img{width:1.25rem;height: 1.25rem;margin-right: 0.62rem;vertical-align: middle;}
</style>
